DOM API

标签内容

innerText和innerHTML属性都是用来获取和设置标签的内容的。但是二者还是有区别的

innerHTML

innerHTML可以用于获取和设置标签的所有内容，包括标签和文本内容

//innerHTML:内部的HTML
//  获取标签内容的时候，不管标签还是文本，都能获取到
//  innerHTML设置内容的时候，覆盖原来内容，标签也能生效，浏览器能解析这个标签。

innerText

innerText可以用于获取和设置标签的文本内容，会丢弃掉标签

//innerText:内部 文本
//  获取标签内容的时候，只会获取文本，标签扔掉了
//  设置标签内容的时候，覆盖原来内容，对标签进行转义（目的：把标签直接当文本来用）

二者的区别：

• innerHTML是W3C的标准属性，而innerText是IE提出来的属性，存在兼容性问题。因此更加推荐大家使用innerHTML。
• innerText的作用：防止xss攻击

书写innerText的兼容性代码

//获取标签的innerText（兼容所有浏览器）
function getInnerText(element) {
    if (typeof element.innerText === "string") {
        return element.innerText;
    } else {
        return element.textContent;
    }
}

//设置标签的innerText（兼容所有浏览器）
function setInnerText(element, value) {
    //能力检测
    if (typeof element.innerText === "string") {
        element.innerText = value;
    } else {
        element.textContent = value;
    }
}

节点操作

孩子节点

childNodes

获取所有的孩子节点（包括了元素节点和其他很多类型的节点，基本不常用）

children

获取所有的子元素（用途很广泛）

firstChild

第一个节点

firstElementChild

第一个子元素 有兼容性问题 可以封装一个兼容性方法

lastChild

最后一个节点

lastElementChild

最后一个子元素 有兼容性问题 可以封装一个兼容性方法

兄弟节点

nextSibling

下一个兄弟节点

nextElementSibling

下一个兄弟元素（IE678不兼容）

previousSibling

上一个兄弟节点

previousElementSibling

上一个兄弟元素 有兼容性问题 可以封装一个兼容性方法

样式操作

标签不仅可以通过class属性操作样式，还可以通过style属性操作样。同样的DOM对象可以通过className操作样式，也可以通过style属性操作样。

1 style属性是一个对象
2 style这个对象中属性值都是字符串格式
3 标签中style属性有哪些样式名，在style这个对象中就有对应的属性名。
4 标签中有一些属性带了-，比如background-color,到了style对象中，变成了驼峰命名法，backgroundColor（因为-在js中不是一个合法的标识符）
5 DOM中的style属性只能获取和设置行内样式，在类样式中定义的样式通过style获取不到。

// 获取的时候，只能获取行内样式  style通常只是用来设置样式的，很少用来获取样式。
  console.log(box.style.width);
  console.log(box.style.height);

克隆节点

语法：var newNode = node.cloneNode(deep)

功能：在内存中克隆一份节点

参数：deep

• false：默认值：是浅复制，只会复制标签，节点本身，不会复制节点的孩子。
• true:深度复制，会复制标签，还会复制标签的所有内容 常用

1. 克隆出来的节点跟原来的节点没有关系了，修改了也不会相互影响。
2. 如果克隆的节点带了id，我们需要给id重新设置一个值，不让id冲突

添加节点

appendChild

语法：parent.appendChild(newChild)

parent:调用者，父节点来调用

newChild:需要添加的那个孩子。

作用：把newChild添加到parent的孩子的最后面。

如果添加的是页面中本来就存在的元素，是一个剪切的效果，原来的就不在了。

var demo = document.getElementById("demo");
var box = document.getElementById("box");
box.appendChild(demo);

insertBefore

语法：parent.insertBefore(newChild, refChild);

parent:必须要父节点来调用

newChild：需要添加的那个节点

refChild:添加到哪一个节点的前面。

var ul = document.getElementById("list");
var li = document.createElement("li");
li.innerHTML = "骥骥";
//就是添加到子节点的最前面。
ul.insertBefore(li, ul.children[0]);